<template>
	<view class="nav">
    <view class="total">
      <view class="status"></view>
      <view class="navbar">
      	<view class="back-icon" >
      		<template v-if="pages > 1" >
      			<image class="leftcion" src="../../static/导航栏返回btn.png" :style="{width:'19rpx'}" @click="backhome"></image>
            <slot name="leftContent"></slot>
      		</template>
      		<template v-else>
      			<image class="leftcion" src="../../static/导航栏更多.png" :style="{width:'34rpx'}" @click="more"></image>
      			<slot name="leftContent"></slot>
      		</template>
      	</view>
        <view class="text-warp">
          {{title}}
        </view>
      	<view class="right-content">
      		<slot name="rightContent"></slot>
      	</view>
      </view>
    </view>
    <view class="block_wrap">
    </view>
	</view>
</template>

<script setup>
import { uesNavBarStyle } from "@/utils/system.js"
import { ref, onBeforeMount, defineProps } from 'vue';


//状态栏高度,内容高度
const { statusBarHeight, titleBarHeight, headHeight } = uesNavBarStyle();
const pages = ref(getCurrentPages().length)
const props = defineProps({
  title:{
    type:String,
    default:''
  },
  titleColor:{
    type:String,
    default:'#ffffff'
  }
})
const backhome = () => {
	if (pages.value > 1) {
		uni.navigateBack({
      delta:1
    })
	} else {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
}

const more = () => {
	if (uni.getSystemInfoSync().platform === 'devtools' || uni.getSystemInfoSync().platform === 'ios'
   || uni.getSystemInfoSync().platform === 'android') {
	    uni.navigateTo({
	      url: "/pages/person/person",
	      animationType: 'slide-in-left',
	      animationDuration: 300
	    });
	  } else {
	    // 微信小程序端使用 wx.navigateTo
	    wx.navigateTo({
	      url: "/pages/person/person",
	      animationType: 'slide-in-left', // 微信小程序支持
	      animationDuration: 300
	    });
	  }
}
</script>

<style>
.nav {
	width: 100%;
}
.total{
  z-index: 999;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #e1383c;
}
.status {
	height: v-bind(statusBarHeight);
	width: 100%;
}

.navbar {
	height: v-bind(titleBarHeight);
	width: 100%;
	position: relative;
	overflow: hidden;
}

.back-icon {
	display: flex;
	align-items: center;
	width: 250rpx;
	height: 100%;
  position: absolute;
	margin-left: 30rpx;
}

.back-icon .leftcion {
	height: 30rpx;
	
	margin-right: 16rpx;
}

.right-content {
	position: absolute;
	right: 226rpx;
	height: 100%;
	display: flex;
	align-items: center;
	top: 0;
	max-height: 100%;
}
.block_wrap{
  width: 100%;
  height: v-bind(headHeight);
}
.text-warp{
  position: absolute;
  text-align: center;
  flex: 1;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  font-size: 36rpx;
  color: v-bind(titleColor);
}
</style>